<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<%@ include file="../include/head.jsp" %>
<%@ include file="../include/top.jsp" %>
<%@ include file="../include/left.jsp" %>
<div class="main-content">

    <%@ include file="../include/navigate.jsp" %>
    <div class="container">
        <div class="widget-box">
            <div class="widget-box-header">
                <div class="col-sm-2">
                    <div class="title"><i class="icon-edit">&nbsp;</i>新建用户</div>
                </div>
            </div>
            <div class="widget-box-content" style="padding:15px;">
            <form class="form-horizontal" role="form" action="${pageContext.request.contextPath}/user/add" method="post">
                <div class="form-group">
                    <label class="col-sm-2 control-label">用户名称:</label>
                    
                    <div class="col-sm-5">
                        <input type="text" class="input-mask-username" name="username" data-toggle="tooltip" style="width:100%;"
                               data-placement="left" required>
                    </div>
                    
                    <div class="col-sm-2 control-label" id="username_tips" style="text-align:left;color:#D16E6C;" hidden="true" >字符长度必须超过2!</div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">密码:</label>

                    <div class="col-sm-5">
                        <span class="input-icon input-icon-right" style="width:100%;">
	                        <input type="text" class="input-mask-password" name="password" style="width:100%;" required>
							<!-- <i class="ace-icon fa fa-key"></i> -->
						</span>
                    </div>
                    
                    <div class="col-sm-2 control-label" id="password_tips" style="text-align:left;color:#D16E6C;" hidden="true" >密码长度必须超过6!</div>

                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">邮箱:</label>

                    <div class="col-sm-5">
                        <span class="input-icon input-icon-right" style="width:100%;">
	                        <input type="text" class="input-mask-email" name="email" style="width:100%;" required>
							<!-- <i class="ace-icon fa fa-envelope"></i> -->
						</span>
                    </div>
                    
                    <div class="col-sm-2 control-label" id="email_tips" style="text-align:left;color:#D16E6C;" hidden="true" >请填写正确的邮箱格式!</div>

                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">联系电话:</label>

                    <div class="col-sm-5">
                        <span class="input-icon input-icon-right" style="width:100%;">
                        	<input type="text" class="input-mask-phone" name="phone" placeholder="联系电话" style="width:100%;" required>
							<!-- <i class="ace-icon fa fa-phone"></i> -->
						</span>
                    </div>
                    
                    <div class="col-sm-2 control-label" id="phone_tips" style="text-align:left;color:#D16E6C;" hidden="true">请填写正确的电话号码!</div>

                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">关联角色:</label>

					<div class="col-sm-5">
						<table class="table table-bordered" id="roleTable">
							<tbody>
							</tbody>
						</table>
					</div>
				</div>

				<div class="form-group">
					<label class="col-sm-2 control-label"></label>
					<div class="col-sm-5">
						<select class="form-control" id="roleSelect">
							<option value="-1">请选择...</option>
							<c:forEach items="${allRoles}" var="role">
								<option id="op_${role.roleId}" name="${role.des}">${role.roleName}</option>
							</c:forEach>
						</select>
					</div>

					<div class="col-sm-2">
						<button type="button" class="btn btn-info btn-sm" onclick="addRoleToList()">添加</button>
					</div>
				</div>
				
				<div class="form-group">
                    <label class="col-sm-2 control-label">
                        启用状态:
                    </label>
                    <div class="col-sm-5 checkbox" style="margin-left:15px;">
                        <input  name="enabled" type="checkbox"  checked >
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">
                        备注:
                    </label>
                    <div class="col-sm-5">
                        <textarea id="remark" class="autosize-transition form-control" style="overflow: hidden; word-wrap: break-word; resize: vertical;"></textarea>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label"></label>

                    <div class="col-sm-2">
                        <button type="button" class="btn btn-success"  onclick="submitUserData()">提交</button>
                        <a type="button" class="btn btn-primary" href="${pageContext.request.contextPath}/user/list/1"> 返回列表</a>
                    </div>

                </div>
                
            </form>
        </div>
    </div>
        <div style="position:fixed;bottom:0px; width:100%;" align="center">
            <%@ include file="../include/footer.jsp" %>
        </div>
</div>

<script type="text/javascript">
	$('.input-mask-username').inputmask('a{2,}', {
		onincomplete : function() {
			$('#username_tips').prop("hidden", false);
		},
		oncomplete : function() {
			$('#username_tips').prop("hidden", true);
		},
		clearMaskOnLostFocus: false,
		insertMode: true
	});
	$('.input-mask-password').inputmask('*{6,}', {
		onincomplete : function() {
			$('#password_tips').prop("hidden", false);
		},
		oncomplete : function() {
			$('#password_tips').prop("hidden", true);
		},
		clearMaskOnLostFocus: false,
		insertMode: true
	});
	$('.input-mask-phone').inputmask('99999999999', {
		onincomplete : function() {
			$('#phone_tips').prop("hidden", false);
		},
		oncomplete : function() {
			$('#phone_tips').prop("hidden", true);
		},
		clearMaskOnLostFocus: false,
		insertMode: true
	});
	$('.input-mask-email').inputmask("email", {
		onincomplete : function() {
			$('#email_tips').prop("hidden", false);
		},
		oncomplete : function() {
			$('#email_tips').prop("hidden", true);
		},
		clearMaskOnLostFocus: false,
		insertMode: true
	});
</script>

	<script type="text/javascript">
		$(document)
				.ready(
						function() {
							window.removeRole = function (roleId, roleName, roleDes){
								$("#tr_" + roleId).remove();
								$("#roleSelect").append("<option id='op_" + roleId + "' name='" + roleDes + "'>" + roleName + "</option>");
								
								if($("tr[id^='tr_']").length == 0){
									$("#roleTable").append("<tr id='info_no_role' border='0'><td border='0'><span style='color:#C0C0C0;'>暂未关联任何角色，请选择角色并添加。</span></td></tr>");
								}
							}
							
							window.addRoleToList = function(){
								var roleName = $(":selected").val();
								var op_roleId = $(":selected").attr("id");
								var roleDes = $(":selected").attr("name");
								
								if("-1" == $(":selected").val()){
									scroll(0, 0);
									$("#tips").remove();
									$("#saveStatus").fadeIn();
									$("#saveStatus")
											.append(
													"<div class='alert alert-danger' role='alert' id='tips'>请选择要添加的角色！</div>");
									$("#saveStatus").fadeOut(5000);
									return;
								} else {
									var roleId = op_roleId.replace("op_", "");
									$(":selected").remove();
								}
								
								if($("tr[id^='tr_']").length == 0){
									$("#info_no_role").remove();
								}
								
								$("#roleTable").append('<tr id="tr_' + roleId + '">' + 
													       '<td style="border-right:0px;"><strong>' + roleName + '</strong> (' + roleDes + ')</td>' +
														   '<td align="right" style="border-left:0px;">' +
													           "<span class=\"ace-icon fa fa-times red\" aria-hidden=\"true\" onclick=\"removeRole('" + roleId + "', '" + roleName + "', '" + roleDes + "')\"></span>" + 
													       '</td>' + 
													   '</tr>');
							}
							
							function removeRoleExist(){
								$.each($("tr[id^='tr_']"), function(index, value){
									var roleId = $(value).attr("id").replace("tr_", "");
									$("#op_" + roleId).remove();
								});
							}
							
							function setTableStatus(){
								if($("tr[id^='tr_']").length == 0){
									$("#roleTable").append("<tr id='info_no_role'><td><span style='color:#C0C0C0;'>暂未关联任何角色，请选择角色并点击添加。</span></td></tr>");
								}
							}
							
							removeRoleExist();
							setTableStatus();
							
							window.check = function() {
								if (!$('.input-mask-username').inputmask("isComplete")){
									$('#username_tips').prop("hidden", false);
									return false;
								}
								
								if (!$('.input-mask-password').inputmask("isComplete")){
									$('#password_tips').prop("hidden", false);
									return false;
								}
								
								if(!$('.input-mask-email').inputmask("isComplete")){
									$('#email_tips').prop("hidden", false);
									return false;
								}
								if (!$('.input-mask-phone').inputmask("isComplete")){
									$('#phone_tips').prop("hidden", false);
									return false;
								}
								
								return true;
							}
							
							window.getRoles = function(){
								var selectedRoles = "";
								$.each($("tr[id^='tr_']"), function(index, value){
									selectedRoles += $(value).attr("id").replace("tr_", "") + ",";
								});
								
								return selectedRoles;
							}
							
							window.submitUserData = function(){
								
								if(!check()){
									return false;
								}
								
								$.ajax({
									type : 'post',
									url : '/user/add',
									data : {
										"username" : $("input[name='username']").val(),
										"password" : $("input[name='password']").val(),
										"email" : $("input[name='email']").val(),
										"phone" : $("input[name='phone']").val(),
										"enabled" : $(":checkbox[name='enabled']").prop("checked"),
										"remark" : $("#remark").val(),
										"rolesAssignToUser" : getRoles()
									},
									cache : false,
									dataType : 'json',
									async: false, 
									success : function(data) {
										if(data != 'success'){
											operationFailedWithMessage(data);
										} else {
											location.href ="/user/list/1?msg=添加成功！";
										}
									},
									error : function() {
										operationFailed();
									}
								});
							}

						});
	</script>

<%@ include file="../include/bottom.jsp" %>